import { Button, Card, Drawer, Form, message, Modal, Space, Table, TimePicker } from "antd";
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { useEffect } from "react";
import { useCallback } from "react";
import { useState } from "react";
import { DELETE_TIMESLOT, GET_TIMESLOT, POST_TIMESLOT } from "../../api/timeslot";
import { addZero } from "../../utils/tools";

function Timeslot() {

  // 时间数据列表
  let [timeslots, setTimeslots] = useState([]);
  // 获取数据
  const getData = useCallback(async () => {
    let res = await GET_TIMESLOT()
    console.log(res);
    setTimeslots(res.data)
  }, [])
  useEffect(() => {
    getData()
  }, [getData])
  // 删除数据
  // 获取对话框组件
  // let [model,contextHolder] = Modal.useModal()
  const delTimeslot = useCallback((id) => {
    // console.log(id);
    Modal.confirm({
      title: '确认删除后数据无法恢复，请确认删除',
      icon: <ExclamationCircleOutlined />,
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        let res = await DELETE_TIMESLOT(id)
        console.log(res);
        message.success(res.data)
        getData()
      }
    })

  })

  // 列配置
  let columns = [
    {
      title: "id",
      dataIndex: "_id"
    },
    {
      title: "时间段",
      dataIndex: "time"
    },
    {
      title: "操作",
      dataIndex: "action",
      render: (text, record) => {
        return (
          <Space>
            <Button type="primary" danger onClick={() => delTimeslot(record._id)}>删除</Button>
          </Space>
        )

      }
    }
  ]


  // 新增时间数据
  let [open, setOpen] = useState(false)
  let [form] = Form.useForm() // 获取form表单
  // 提交新增数据
  let submit = async (values) => {
    console.log(values);
    // 获取 02::00-05:00 格式的时间
    // `${addZero(values.startTime.$H)}:${addZero(values.startTime.$m)}-${addZero(values.endTime.$H)}:${addZero(values.endTime.$m)}`
    let timeslot = `${addZero(values.startTime.$H)}:${addZero(values.startTime.$m)}-${addZero(values.endTime.$H)}:${addZero(values.endTime.$m)}`
    console.log(timeslot);
    // 添加时间需要传递{timeslot: 02::00-05:00}
    let res = await POST_TIMESLOT({ timeslot })
    res.code ? message.info(res.data) : message.success(res.data)
    // 清空表单数据
    form.resetFields()
    // 清除禁用时间
    setDisabledEndH([]);
    setDisabledStartH([]);
    setOpen(false)
    // console.log(res);
  }

  // 遍历返回需要禁用的数据，包含当前时分
  const range = (start, end) => {
    // console.log(start, end);
    const result = [];
    for (let i = start; i <= end; i++) {
      result.push(i);
    }
    // console.log(result)
    return result;
  }
  // 选择开始时间，只能禁用小时
  let [disabledEndH, setDisabledEndH] = useState([])
  // let [disabledEndM, setDisabledEndM] = useState([])
  let changeStartTime = (time) => {
    console.log("选择时间");
    let h = range(0, time.$H)
    // let m = range(0, time.$m)
    setDisabledEndH(h)
    // setDisabledEndM(m)
  }
  const disabledEndTime = () => {
    return {
      disabledHours: () => disabledEndH,
      // disabledMinutes: () => disabledEndM,
    }
  }
  let [disabledStartH, setDisabledStartH] = useState([])
  // let [disabledStartM, setDisabledStartM] = useState([])
  let changeEndTime = (time) => {
    let h = range(time.$H, 24)
    // let m = range(time.$m, 60)
    setDisabledStartH(h)
    // setDisabledStartM(m)
  }
  const disabledStartTime = () => {
    return {
      disabledHours: () => disabledStartH,
      // disabledMinutes: () => disabledStartM,
    }
  }

  // const disabledTime = (nowTime) => {
  //   const h = nowTime.$H
  //   const m = nowTime.$m
  //   console.log("0000", nowTime, h, m)
  //   return {
  //     disabledHours: () => range(0, h),
  //     disabledMinutes: () => range(0, m),
  //   }
  // }
  return (
    <Space style={{ display: "flex" }} direction="vertical">
      <Card>
        <Button type="primary" onClick={() => setOpen(true)}>新增</Button>
      </Card>
      <Drawer open={open} onClose={() => setOpen(false)}>
        <Form onFinish={submit} form={form}>
          <Form.Item name={"startTime"} label="开始时间">
            {/* onChange传递的参数为time 即当前选择的时间数据 */}
            <TimePicker format={"HH:mm"} onChange={changeStartTime} disabledTime={disabledStartTime}></TimePicker>
          </Form.Item>
          <Form.Item name={"endTime"} label="结束时间">
            <TimePicker format={"HH:mm"} onChange={changeEndTime} disabledTime={disabledEndTime}></TimePicker>
          </Form.Item>
          <Button type="primary" htmlType="submit">提交</Button>
        </Form>
      </Drawer>
      <Table rowKey="_id" dataSource={timeslots} columns={columns}></Table>
    </Space>

  );
}

export default Timeslot;